<template>
  <el-container style=" border: 1px solid #eee;height: 100vh">
    <el-aside width="220px" style="background-color: rgb(48,65,86);height: 100vh; ">
      <div style="line-height: 80px; text-align: center; color: #fff;font-weight: bold">蜗牛TMS</div>
      <el-menu
          router
          background-color="rgb(48,65,86)"
          text-color="#fff"
          :default-active="$route.path"
          >
        <template v-for="(item,i) in adminMenus">
          <!--index 没有用但是必需字段且为 string -->
          <el-submenu :key="i" :index="i + ''" style="text-align: left">
          <span slot="title" style="font-size: 17px;">
            <i :class="item.iconCls"></i>
            {{item.nameZh}}
          </span>
            <el-menu-item
                @click="() => toPath(itemRoute)"
                v-for="child
                in item.children"
                :key="child.path"
                :index="child.path">
              <i :class="child.icon"></i>
              {{ child.nameZh }}
            </el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <el-row>
          <el-col :span='6'>
            <div style="margin-top: 20px;">

              <el-page-header @back="goBack()" title="主页" >
              </el-page-header>
            </div>

          </el-col>
          <el-col :span='18'>
<!--            <div style="float: left; margin-left: 65%;">-->
<!--              <el-button>-->
<!--                <span>{{newDate}}</span>-->
<!--              </el-button>-->
<!--            </div>-->

            <div style="margin-right: 17px;">
              <el-dropdown split-button size="small" trigger="click">
                个人中心
                <el-dropdown-menu>
                  <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                  <el-dropdown-item divided>修改密码</el-dropdown-item>
                  <el-dropdown-item divided>联系管理员</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>

          </el-col>

        </el-row>


      </el-header>
      <el-main>
        <div>
          <router-view></router-view>
        </div>
      </el-main>
<!--      <el-footer>Footer</el-footer>-->
    </el-container>
  </el-container>
</template>

<script>
//页头
export default {
  created() {
    if(this.$route.path=='/main'||this.$route.path=='/'){
        this.$router.push("/dashboard");
    }
  },
  computed: {

  },
  methods: {
    toPath(opt) {
      const { path } = this.$route;
      if (opt.path !== path) {
        this.$router.push({ path: opt.path });
      }
    },
    goBack() {
      location.href = "/main";
    },
    logout() {
      localStorage.removeItem("token");
	  localStorage.removeItem("name");
      this.$router.push("/login");
    }
  },
  data(){
    return{
      adminMenus:'',
      //时间
      newDate: new Date(),
      navList: [
        {name: '/admin/users', navItem: '用户管理', icon: 'el-icon-user'},
        {name: '/admin/library', navItem: '图书管理', icon: 'el-icon-tickets'},
        {name: '/admin/news', navItem: '新闻管理', icon: 'el-icon-news'},
        {name: '/system', navItem: '系统设置', icon: 'el-icon-s-tools'}
      ],
    }
  },
  // 挂载
  mounted () {
    this.axios.get("http://localhost:8080/users/menus").then(
        res=>{
          console.log(res.data)
          this.adminMenus = res.data;
        }
    )

    let that = this
    this.timer = setInterval(function () {
      that.newDate = new Date().toLocaleString()
    })
  },
  // 销毁时清除计时器
  beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style>
.el-header,
.el-footer {
  background-color:  rgb(48,65,86);
  color: #fff;
  text-align: right;
  line-height: 60px;
  border: 1px solid #99a9bf;
  font-size: 30px;
}

/*.el-aside {*/

/*  color: #333;*/
/*  text-align: left;*/

/*}*/

/*.el-main {*/
/*	background-color: #E9EEF3;*/
/*	color: #333;*/
/*	!*text-align: center;*!*/
/*	!*line-height: 160px;*!*/
/*}*/

/*body>.el-container {*/
/*  margin-bottom: 40px;*/
/*}*/

/*.el-container:nth-child(5) .el-aside,*/
/*.el-container:nth-child(6) .el-aside {*/
/*  line-height: 260px;*/
/*}*/

/*.el-container:nth-child(7) .el-aside {*/
/*  line-height: 320px;*/
/*}*/
</style>
